import React from 'react';
import { Card, List, Avatar, Badge, Button, Empty } from 'antd';
import { MessageOutlined, UserOutlined } from '@ant-design/icons';

const Messages: React.FC = () => {
  // 模拟消息数据
  const messages = [
    {
      id: 1,
      sender: '系统通知',
      avatar: '',
      content: '欢迎使用管理系统！',
      time: '2024-01-01 10:00',
      unread: true,
    },
    {
      id: 2,
      sender: '管理员',
      avatar: '',
      content: '系统将在今晚进行维护，请提前保存数据。',
      time: '2024-01-01 09:30',
      unread: true,
    },
  ];

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800 dark:text-white flex items-center gap-2">
          <MessageOutlined />
          消息中心
        </h1>
        <p className="text-gray-600 dark:text-gray-300 mt-2">查看和管理您的消息</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* 消息分类 */}
        <Card title="消息分类" className="lg:col-span-1">
          <div className="space-y-2">
            <div className="flex items-center justify-between p-2 rounded hover:bg-gray-50 cursor-pointer">
              <span>全部消息</span>
              <Badge count={2} size="small" />
            </div>
            <div className="flex items-center justify-between p-2 rounded hover:bg-gray-50 cursor-pointer">
              <span>系统通知</span>
              <Badge count={1} size="small" />
            </div>
            <div className="flex items-center justify-between p-2 rounded hover:bg-gray-50 cursor-pointer">
              <span>私信</span>
              <Badge count={1} size="small" />
            </div>
            <div className="flex items-center justify-between p-2 rounded hover:bg-gray-50 cursor-pointer">
              <span>已读消息</span>
              <Badge count={0} size="small" />
            </div>
          </div>
        </Card>

        {/* 消息列表 */}
        <Card 
          title="消息列表" 
          className="lg:col-span-3"
          extra={<Button type="primary" size="small">标记全部已读</Button>}
        >
          {messages.length > 0 ? (
            <List
              itemLayout="horizontal"
              dataSource={messages}
              renderItem={(item) => (
                <List.Item
                  className={`cursor-pointer hover:bg-gray-50 p-4 rounded ${
                    item.unread ? 'bg-blue-50' : ''
                  }`}
                >
                  <List.Item.Meta
                    avatar={
                      <Badge dot={item.unread}>
                        <Avatar 
                          src={item.avatar} 
                          icon={<UserOutlined />}
                        />
                      </Badge>
                    }
                    title={
                      <div className="flex items-center justify-between">
                        <span className={item.unread ? 'font-semibold' : ''}>{item.sender}</span>
                        <span className="text-sm text-gray-500">{item.time}</span>
                      </div>
                    }
                    description={
                      <div className={item.unread ? 'font-medium' : 'text-gray-600'}>
                        {item.content}
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          ) : (
            <Empty 
              description="暂无消息"
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            />
          )}
        </Card>
      </div>
    </div>
  );
};

export default Messages;